<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="./../plantilla/plantillaGeneral.xhtml">

	<ui:define name="content">
		<h:form id="form">
			<p:tabView>
				<!--PESTAÑA ADMINISTRACION  -->
				<p:tab title="#{general.administracion} #{general.usuario}">
					<!--MENSAJES  -->
					<p:growl id="menTec" life="#{general.tiempoMen}" />

					<!--ACORDEON  -->
					<p:accordionPanel effect="bounceslide" autoHeight="false" id="acoPanTec"  >
						<!--PRIMERA PESTAÑA DEL ACORDEON: INGRESAR DATOS-->
						<p:tab title="#{general.insertar} #{general.usuario}">
							<!--BARRA GUARDAR-->
							<p:toolbar>
								<p:toolbarGroup align="right">
									<p:commandButton value="#{general.guardar}" title="#{general.guardar} #{general.usuario}"
										update="menTec,griCli, dtTec, gridDatTec" 
										actionListener="#{usuarioBean.guardarUsuario}" />
								</p:toolbarGroup>
							</p:toolbar>
							<!--DATOS-->
							<h:panelGrid columns="2" id="griCli">
								<h:outputText id="outUsuNombre" value="#{general.nombre}: "
									styleClass="texto_negrita_derecha" />
                                <p:inputText
									id="inpUsuNombre" value="#{usuarioBean.usuario.nombre}"
									size="60" required="true"
									requiredMessage="#{general.mensajeRequeridoNombre}"
									validatorMessage="#{general.msgLongMaxCam} #{general.nombre} es de 100 #{general.caracteres}">
								</p:inputText>
								<h:outputText id="outUsuApe" value="#{general.apellido}: "
									styleClass="texto_negrita_derecha" />
								<p:inputText id="inpUsuApe"
									value="#{usuarioBean.usuario.apellido}" size="60"
									validatorMessage="#{general.msgLongMaxCam} #{general.apellido} es de 50 #{general.caracteres}">
									<f:validateLength maximum="50" />
								</p:inputText>
							</h:panelGrid>
						</p:tab>
						<!--SEGUNDA PESTAÑA DEL ACORDEON: EDITAR DATOS-->
						<p:tab title="#{general.listaDe} #{general.usuario}">
							<!--BARRA EXPORTAR IMPRIMIR-->
							<p:toolbar>
								<p:toolbarGroup align="right">
									<h:commandButton value="#{general.modificar}" title="#{general.modificar}"
										image="/img/iconoEditar.png" styleClass="botonMat">
										<p:ajax update="form:gridDatTec, menTec, acoPanTec"
											listener="#{usuarioBean.editarUsuario}" />
									</h:commandButton>
									<h:commandButton value="#{general.eliminar}" title="#{general.eliminar}"
										image="/img/iconoEliminar.png" styleClass="botonMat"
										onclick="diaConMatTec.show();return false;" type="button"/>
									<p:divider />
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.excel}">
										<p:graphicImage value="/img/iconoExcel.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="xls" target="dttCli"
											fileName="listaUsuario" />
									</h:commandLink>
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.pdf}">
										<p:graphicImage value="/img/iconoPdf.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="pdf" target="dttCli"
											fileName="listaUsuarios" />
									</h:commandLink>
									<h:commandLink immediate="true"
										title="#{general.exportar} #{general.xml}">
										<p:graphicImage value="/img/iconoXml.png" 
											styleClass="botonMat"/>
										<p:dataExporter type="xml" target="dttCli"
											fileName="listaUsuarios" />
									</h:commandLink>
								</p:toolbarGroup>
							</p:toolbar>
							<br />
								<p:dataTable id="dtTec" var="item"
									value="#{usuarioBean.listaUsuarios}"
									selectionMode="single"
									rowSelectListener="#{usuarioBean.onRowSelect}" paginator="true"
									rows="10">
									<f:facet name="header">
										<h:panelGrid columns="1">
											<h:outputText id="outHeadCli"
												value="#{general.buscar} #{general.usuario}" />
										</h:panelGrid>
									</f:facet>
									<p:column style="width: 250px" sortBy="${item.nombre}" filterBy="${item.nombre}">
										<f:facet name="header">
											<h:outputText value="#{general.nombre}" />
										</f:facet>
										<h:outputText value="#{item.nombre}" style="width:inherit" />
									</p:column>
									<p:column style="width: 150px" sortBy="${item.apellido}" filterBy="${item.apellido}">
										<f:facet name="header">
											<h:outputText value="#{general.apellido}" />
										</f:facet>
										<h:outputText value="#{item.apellido}" />
									</p:column>
									<p:column style="width: 100px">
										<f:facet name="header">
											<h:outputText value="#{general.telConv}" />
										</f:facet>
										<h:outputText value="#{item.telefono}" />
									</p:column>
									<p:column>
										<f:facet name="header">
											<h:outputText value="#{general.email}" />
										</f:facet>
										<h:outputText value="#{item.mail}" />
									</p:column>
									
								</p:dataTable>
							</p:tab>
					</p:accordionPanel>
				</p:tab>
			</p:tabView>
			<p:confirmDialog modal="true"
			message="#{general.eliminar}" 
			hideEffect="explode" header="#{general.eliminar} #{general.usuario}" severity="alert"
			widgetVar="diaConMatTec">
			<p:commandButton value="Si" oncomplete="diaConMatTec.hide()"
				actionListener="#{usuarioBean.eliminarUsuario}"
				update="form:dtTec, form:menTec" immediate="true">
			</p:commandButton>
			<p:commandButton value="No" onclick="diaConMatTec.hide()"
				type="button" />
		</p:confirmDialog>
		</h:form>
	</ui:define>
	
	<!-- <ui:define name="diaGen"/> -->		
</ui:composition>